<template>
	<div id="page">
		<nav-bar></nav-bar>

		<van-swipe class="main" vertical :show-indicators="false" ref="page" :loop="false">
			<van-swipe-item style="background: #20283d;">
				<!--第一页 -->
				<van-swipe :show-indicators="false" class="banner" autoplay="6000" duration="1000" @change="swiOn">
					<van-swipe-item class="item" :class="bannerTab == 0 ? 'on': '' ">
						<!-- <video-player class="banner-video " ref="Video0" :playsinline="true" :options="Video0"></video-player> -->
						<img class="banner-video tran" :src="banner[0]" >

						<div class="banner-Win"></div>
						<div class="banner-info">
							<div class="tran t-1">{{$t('index.swi1')}}</div>
							<div class="tran t-2">{{$t('index.swi1_t')}}</div>
							<span class="xian"></span>
							<div class="tran yuan"></div>
							<div class="tran notes on">{{$t('index.swi1_in')}}</div>
						</div>
					</van-swipe-item>
					<van-swipe-item class="item" :class="bannerTab == 1 ? 'on': '' ">
						<!-- <video-player class="banner-video " ref="Video1" :playsinline="true" :options="Video1"></video-player> -->
						<img class="banner-video tran" :src="banner[1]"  >
						<div class="banner-Win"></div>
						<div class="banner-info">
							<div class="tran t-1">{{$t('index.swi2')}}</div>
							<div class="tran t-2">{{$t('index.swi2_t')}}</div>
							<span class="xian"></span>
							<div class="tran yuan"></div>
							<div class="tran notes on">{{$t('index.swi2_in')}}</div>
						</div>
					</van-swipe-item>
					<van-swipe-item class="item" :class="bannerTab == 2 ? 'on': '' ">
						<!-- <video-player class="banner-video " ref="Video2" :playsinline="true" :options="Video2"></video-player> -->
						<img class="banner-video tran"  :src="banner[2]"  >
						<div class="banner-Win"></div>
						<div class="banner-info">
							<div class="tran t-1">{{$t('index.swi3')}}</div>
							<div class="tran t-2">{{$t('index.swi3_t')}}</div>
							<span class="xian"></span>
							<div class="tran yuan"></div>
							<div class="tran notes on">{{$t('index.swi3_in')}}</div>
						</div>
					</van-swipe-item>
				</van-swipe>

				<div class="page-go btn-c-lan" @click="navTo('Trading')">GET INTO</div>
			</van-swipe-item>

			<van-swipe-item style="background: #FFF;">
				<!-- 第二页 -->
				<img class="page-bg" src="../assets/indx/index-bg-1.jpg">
				<div class="info-block">
					<div class="title">{{$t('index.title1')}}</div>
					<div class="info">
						&emsp; &emsp;{{$t('index.content1')}}
					</div>

					<div class="info-foot">
						<div class="line"></div>
						<p>Authority</p>
						<p>Query enterpise information</p>
					</div>
					<div class="c-f-img">
						<img class="imgs" src="../assets/indx/FinCEN.png">
						<img class="imgs" src="../assets/indx/NFA.png">
						<img class="imgs" src="../assets/indx/icon-1.png">
					</div>
				</div>


			</van-swipe-item>
			<!-- 第三页 -->
			<!-- <van-swipe-item style="background: #FFF;" >
				<div class="page-main">
					<div class="title">AUTHORITY</div>
					<div class="info" style="text-align: center;">profits and guide block</div>
					<div class="info">custody services of digital assets for institutional funds, market makers </div>

					<div class="aut flx">
						<div class="box">
							<img class="icon" src="../assets/indx/about-bg.png" >
							<a href="https://www.binance.com/en"><div class="btn btn-c-lan">Click to enter</div></a>
						</div>
						<div class="box">
							<img class="icon" src="../assets/indx/FinCEN.png" >
							<a href="https://www.bitfinex.com/"><div class="btn btn-c-lan">Click to enter</div></a>
						</div>
						<div class="box">
							<img class="icon" src="../assets/indx/icon-1.png" >
							<a href="https://bitflyer.com/ja-jp/"><div class="btn btn-c-lan">Click to enter</div></a>
						</div>
					</div>
				</div>
			</van-swipe-item> -->

			<van-swipe-item style="background: #20283d;">
				<!-- 第四页 -->
				<div class="title">{{$t('index.title2')}}</div>

				<div class="card " :class="'card-'+ tabKa ">
					<div class="card-box c-t-1 tran">
						<img class="card-img" src="../assets/indx/certificate.png">
						<div class="h">{{$t('index.card1')}}</div>
						<p class="p">
							{{$t('index.card1_in')}}
						</p>
					</div>
					<div class="card-box c-t-2 tran">
						<img class="card-img" src="../assets/indx/transaction.png">
						<div class="h">{{$t('index.card2')}}</div>
						<p class="p">
							{{$t('index.card2_in')}}
						</p>
					</div>
					<div class="card-box c-t-3 tran">
						<img class="card-img" src="../assets/indx/i-c.png">
						<div class="h">{{$t('index.card3')}}</div>
						<p class="p">
							{{$t('index.card3_in')}}
						</p>
					</div>
				</div>

				<div class="bottom-btn">
					<div class="btn2 btn-c-lan" @click="navTo('asset')">{{$t('index.btn1')}}</div>
					<div class="btn">{{$t('index.btn2')}}</div>
				</div>
			</van-swipe-item>

			<van-swipe-item style="background: #20283d;">
				<!-- 第五页 -->
				<div class="page-main">
					<div class="title">{{$t('index.title3')}}</div>

					<div class="flx g-box">
						<div class="box">
							<div class="in" @click="navTo('certificates')">
								<img class="log" src="../assets/indx/i-c-1.png">
								<span class="p">{{$t('index.p_1')}}</span>
							</div>
						</div>
						<div class="box">
							<div class="in">
								<img class="log" src="../assets/indx/i-c-2.png">
								<span class="p">{{$t('index.p_2')}}</span>
							</div>
						</div>
						<div class="box">
							<div class="in"> <a
									href="https://businesssearch.sos.ca.gov/CBS/SearchResults?filing=&SearchType=CORP&SearchCriteria=Chssgy+Inc&SearchSubType=Keyword">
									<img class="log" src="../assets/indx/i-c-3.png">
									<span class="p">{{$t('index.p_3')}}</span>
								</a></div>
						</div>
					</div>
				</div>
			</van-swipe-item>

			<van-swipe-item style="background: #20283d;">
				<img class="page-bg" src="../assets/indx/index-bg-2.jpg">
				<div style="position: relative; z-index: 1;">
					<div class="title">{{$t('index.title4')}}</div>
					<div class="logo-box">
						<div class="box"> <a href="https://www.huobi.com/zh-cn/">
								<img class="icon" src="../assets/icon/icon1.png">
								<p class="name">huobi</p>
							</a></div>
						<div class="box"> <a href="https://www.binance.com/en">
								<img class="icon" src="../assets/icon/icon2.png">
								<p class="name">Binance</p>
							</a></div>
						<div class="box"> <a href="https://www.okx.com/">
								<img class="icon" src="../assets/icon/icon3.png">
								<p class="name">OKX</p>
							</a></div>
						<div class="box"> <a href="https://www.coinbase.com/">
								<img class="icon" src="../assets/icon/icon4.png">
								<p class="name">Coinbase</p>
							</a></div>
						<div class="box"> <a href="https://global.bittrex.com/">
								<img class="icon" src="../assets/icon/icon5.png">
								<p class="name">Bittrex</p>
							</a></div>
						<div class="box"> <a href="https://www.bitfinex.com/">
								<img class="icon" src="../assets/icon/icon6.png">
								<p class="name">Bitfinex</p>
							</a></div>
						<div class="box"> <a href="https://www.gemini.com/apac/hong-kong">
								<img class="icon" src="../assets/icon/icon7.png">
								<p class="name">Gemini</p>
							</a></div>
						<div class="box"> <a href="https://www.kraken.com/">
								<img class="icon" src="../assets/icon/icon8.png">
								<p class="name">kraken</p>
							</a></div>
						<div class="box"> <a href="https://bitflyer.com/ja-jp/">
								<img class="icon" src="../assets/icon/icon9.png">
								<p class="name">Bitflyer</p>
							</a></div>
						<div class="box"> <a href="https://www.kucoin.com/">
								<img class="icon" src="../assets/icon/icon10.png">
								<p class="name">Kucoin</p>
							</a></div>
					</div>
				</div>
			</van-swipe-item>

			<van-swipe-item style="background: #fff;">
				<img class="page-bg" src="../assets/indx/foot-bg.jpg">
				<div class="footer">

					<video-player class="f-Video" ref="f-Video" :options="Foot_Video"></video-player>

					<div class="hui">CONTACT US</div>
					<span class="hui">customer-service@coin-btc.net</span>
					<br><br>
					<div class="line"></div>
					<div class="btn" @click="back()">BACK</div>
					<div class="weib"></div>

          <div class="sca-bottom">
            <a href="https://scamadviser.com/check-website/https://coinbtc.net/" target="_blank" >
              <img width="50px" src="https://files.scamadviser.com/thumbs/logo-scamadvisor-def-2021-33a26_900x.jpg">
            </a>
          </div>

				</div>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
	import navBar from "../components/navBar.vue"
	import {mapState} from "vuex";

	export default {
		name: "index",
		components: {
			navBar
		},
		data() {
			return {
				videoUrl: '../assets/video/earth.webm',
				bannerTab: 0,
				tabKa: 1,
				invite_code: '',

				banner:[
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1651163663banner0.png',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1651163675banner1.png',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1651163686banner2.png',
				],
				GIF :[
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1651161102earth.gif',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1651162299machine.gif',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1651162381woman.gif'
				],

				Foot_Video:{
					autoplay: false, preload: 'auto', fluid: true,
					sources: [{
						type: "video/mp4", // 类型
						src: 'https://zj-1216.oss-cn-hangzhou.aliyuncs.com/82e71764909a24f451e961c9fadafbd3.mp4'// url地址
					}]
				}


			}
		},
		mounted() {
			this.BuyType();
			setTimeout( () =>{
				this.banLoag(0)
			},1000)
		},
		methods: {
			banLoag(i){
				console.log(i)
				var _this = this
				var img = new Image();
				img.src = _this.GIF[i];
				img.onload = function () {undefined
					console.log("load"+i)
					_this.banner[i] = _this.GIF[i];
					console.log(_this.banner[i])
					_this.$forceUpdate();
					if( i < 2){
						var e = i + 1
						_this.banLoag(e)
					}
				};
			},

			back() {
				document.documentElement.scrollTop = 0;
				this.$refs.page.swipeTo(0);
			},
			async BuyType() {
				const {err, res} = await this.$request.get("/chss/exchangeInfo/get_exchanges", {});
				if (err === null) {
					this.B_type = res;
				}
			},
			navTo: function(e) {
				this.$router.push({
					name: e
				})
			},
			footVideo(id){
				// this.$refs.footVideo.paused === true ? this.$refs.footVideo.play() : this.$refs.footVideo.pause();
				// const elVideo = document.getElementById(id)
				this.$refs.footVideo.play();
				this.$refs.footVideo.requestFullscreen();

			},
			swiOn: function(e) {
				this.bannerTab = e;
				// this.$refs.Video0.player.pause();
				// this.$refs.Video1.player.pause();
				// this.$refs.Video2.player.pause();
				// if(e == 0 ){
				// 	this.$refs.Video0.player.currentTime(0)
				// 	this.$refs.Video0.player.play();
				// }else if (e == 1) {
				// 	this.$refs.Video2.player.currentTime(0)
				// 	this.$refs.Video1.player.play();
				// } else if(e == 2){
				// 	this.$refs.Video2.player.currentTime(0)
				// 	this.$refs.Video2.player.play();
				// }

				var ka = this.tabKa + 1;
				if (ka > 3) {
					ka = ka - 3
				}
				this.tabKa = ka
			}
		}

	}
</script>

<style lang="scss" scoped>

.sca-bottom{position:absolute; bottom: 10px; width: 100%; left: 0px; text-align: center;}

	#page {
		height: 100%;
		position: relative;
		text-align: center;
		// overflow-x: hidden;
		// overflow-y: scroll ;
		color: #333;


		.main {
			margin-top: 120px;
			height: calc(100% - 120px);
			position: relative;
			z-index: 9;
			overflow: hidden ;
		}
	}

	.page-bg {
		position: absolute;
		z-index: 1;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}


	.page-main {
		height: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;

		.flx {
			flex: 1;
			position: relative;
			z-index: 1;
		}
	}

	.tran {
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}

	.banner {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 9;

		.banner-video {
			position: absolute;
			z-index: -1;
			opacity: 0;
			top: 0px; left:0px;
			width: 100%; height:100%;
			object-fit: cover;
			::v-deep {
				.video-js {
					height: 100%;
					.vjs-tech {object-fit: cover;}
					.vjs-poster {background-size: auto 100%;}
				}
				.vjs-big-play-button {opacity: 0;}
			}


		}

		.item {
			overflow: hidden;
		}
		.banner-Win{
			position: absolute; z-index: 9;
			width: 100%; height:100%;
			top:0px;left:0px;
		}
		.banner-info {
			height: 45%;
			border-bottom: 1px solid #eee;
			position: relative;
			z-index: 9;

			.t-1 {
				position: absolute;
				bottom: 160px;
				width: 100%;
				line-height: 150px;
				font-size: 80px;
				font-weight: 300;
				text-align: center;
				color: transparent;
			}

			.t-2 {
				position: absolute;
				line-height: 80px;
				padding-top: 40px;
				top: 120%;
				color: transparent;
				text-align: center;
				width: 100%;
				font-size: 60px;
			}

			.xian {
				height: 10px;
				background: #0fc1b7;
				width: 150px;
				position: absolute;
				bottom: -5px;
				left: 50%;
				margin-left: -75px;
			}

			.yuan {
				position: absolute;
				top: 100%;
				left: 50%;
				margin-top: 0px;
				margin-left: 0px;
				z-index: -1;
				opacity: .3;
				height: 0px;
				width: 0px;
				background: #0fc1b7;
				border-radius: 50%;

				-webkit-transition-delay: 1s;
				-moz-transition-delay: 1s;
				-o-transition-delay: 1s;
				transition-delay: 1s;
			}

			.notes {
				text-align: center;
				font-size: 28px;
				width: 70%;
				margin: 0 auto;
				position: absolute;
				left: 40%;
				top: 140%;
				color: transparent;
				-webkit-transition-delay: 1s;
				-moz-transition-delay: 1s;
				-o-transition-delay: 1s;
				transition-delay: 1s;

			}
		}

		.on {
			z-index: 9;

			.banner-video {
				opacity: 1;
			}

			.t-1 {
				bottom: 0px;
				color: #fff;
			}

			.t-2 {
				top: 100%;
				color: #fff;
			}

			.yuan {
				margin-top: -200px;
				margin-left: -200px;
				height: 400px;
				width: 400px;
			}

			.notes {
				color: #fff;
				left: 15%;
			}

		}

	}

	.page-banner {
		height: 100%;
		background: red;

		.banner-bg {
			height: 100%;
			width: 100%;
		}
	}

	.page-go {
		position: absolute;
		bottom: 100px;
		left: 50%;
		z-index: 999;
		margin-left: -150px;
		width: 300px;
		border-radius: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 40px;
		color: #333;
	}


	.info-block {
		margin: 30px;
		border-radius: 10px;
		position: relative;
		z-index: 9;
		background: #FFF;
		padding: 1px;

		.info {
			padding: 5px 30px;
			color: #aaa;
			line-height: 40px;
			text-align: left;
			font-size: 30px;
			font-weight: 300;
		}
		.info-foot {
			.line {
				height: 40px;
				width: 49%;
				border-right: 5px dotted #999;
			}

			color: #666;
			line-height: 25px;
			font-size: 16px;
		}

		.c-f-img {
			display: flex;
			justify-content: center;

			.imgs {
				width: 100px;
				height: 100px;
				margin: 10px;
			}
		}

	}

	.title {
		color: #458ae2;
		font-size: 40px;
		line-height: 80px;
		margin-top: 50px;
	}

	.aut {
		padding: 0px 100px;
		display: flex;
		flex-direction: column;
		margin-top: 20px;

		.box {
			flex: 1;
			border: 1px solid #EEE;
			text-align: center;
			position: relative;
			margin-bottom: 80px;

			.icon {
				height: 120px;
				margin: 30px auto;
			}

			.btn {
				height: 70px;
				line-height: 70px;
				border-radius: 60px;
				display: block;
				color: #FFF;
				font-size: 35px;
				font-weight: 200;
				width: 300px;
				position: absolute;
				bottom: -35px;
				left: 50%;
				margin-left: -150px;

			}
		}
	}

	.card {
		position: relative;
		min-height: 600px;
		width: 100%;
		z-index: 99;
		margin-top: 50px;

		.card-box {
			position: absolute;
			left: 20%;
			top: 0px;
			text-align: center;
			padding: 50px 0;
			box-sizing: border-box;
			width: 50%;
			height: 100%;
			border: 1px solid #bbb;
			border-radius: 20px;
			background: #fff;
			box-shadow: 0 0 10px 1px #eee;

			.card-img {
				height: 150px;
				display: inline-block;
			}

			.h {
				font-size: 40px;
				color: #000;
			}

			.p {
				display: block;
				line-height: 45px;
				text-align: left;
				color: #999;
				padding: 0px 20px;
				padding-top: 20px;
			}
		}

		&.card-1 {
			.c-t-1 {
				z-index: 1;
				left: 25%;
			}

			.c-t-2 {
				z-index: -1;
				left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-3 {
				z-index: -1;
				left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
		}

		&.card-2 {
			.c-t-1 {
				z-index: -1;
				left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-2 {
				z-index: 1;
				left: 25%;
			}

			.c-t-3 {
				z-index: -1;
				left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
		}

		&.card-3 {
			.c-t-1 {
				z-index: -1;
				left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-2 {
				z-index: -1;
				left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}

			.c-t-3 {
				z-index: 1;
				left: 25%;
			}
		}
	}

	.bottom-btn {
		text-align: center;
		padding-top: 80px;

		.btn {
			display: inline-block;
			width: 300px;
			height: 80px;
			line-height: 80px;
			background: #FFF;
			margin: 0px 20px;
			font-size: 30px;
			border-radius: 70px;
			color: #256dff
		}

		.btn2 {
			display: inline-block;
			width: 300px;
			height: 80px;
			line-height: 80px;
			color: #FFF;
			border-radius: 70px;
		}
	}

	.g-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 30px;
		box-sizing: border-box;

		.box {
			flex: 1;
			width: 80%;
			margin: 30px auto;
			background: #fff;
			border-radius: 10px;
			border: 1px solid #bbb;
			padding: 30px;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.in {
				width: 100%;
				text-align: center;

				.log {
					height: 100px;
				}

				.p {
					color: #333333;
					display: block;
					margin: 0px;
				}
			}

		}
	}

	.logo-box {
		overflow: hidden;
		padding: 20px;

		.box {
			width: 25%;
			float: left;
			padding: 30px 20px;
			box-sizing: border-box;
			color: #fff;
			text-align: center;

			.icon {
				width: 100%;
			}

			.name {
				color: #FFF;
			}

		}

	}


	.footer {
		position: relative;
		height: 100%;
		z-index: 9;
		overflow: hidden;

		.f-bg {
			width: 100%;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
		}
		.f-Video{
			margin: 0px 80px;
			margin-top: 150px;
			background: #00193A;

			::v-deep {


				.vjs-poster {
					background-size: auto 100%;
				}
				.vjs-big-play-button {
					top: 50%; left:50%;
					height: 100px; width: 100px;
					margin-top: -50px; margin-left: -50px;
					border-radius: 50%;
				}
			}
			//.Video{	width: 100%;	object-fit: contain;}
		}
		.f-box {
			background: rgba(37, 109, 255, 0.80);
			padding: 50px 30px;
			margin: 50px 80px;
			color: #FFF;
			margin-top: 150px;
			color: #eee;

			.h3 {
				font-size: 50px;
				font-weight: 300;
				margin: 0px;
			}

			.p {
				margin-top: 30px;
				line-height: 50px;
				text-align: left;
			}
		}

		.hui {
			color:#FFF;
			margin: 20px 0px;
		}

		.line {
			display: block;
			width: 49%;
			// background: #f00;
			height: 120px;
			margin: 30px 0px;
			border-right: 4px dotted #bbb;
		}


		.btn {
			background: #256dff;
			color: #FFF;
			height: 80px;
			line-height: 80px;
			font-size: 35px;
			display: inline-block;
			padding: 0px 50px;
			border-radius: 70px;
		}

		.weib {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			background: #256dff;
			color: #FFF;
			line-height: 80px;
		}
	}
</style>
